// 1： 导入路由
import {createRouter, createWebHistory} from 'vue-router'
// import {createRouter, createWebHashHistory} from 'vue-router'

// 2: 导入页面模板


//3: 创建路由器对象，将模板全部进行路由匹配和注册
const router = createRouter({
    // HASH访问模式， http://localhost:8080/#news 有时候加锚点可以会被误解
    //history: createWebHashHistory(),
    // URL访问模式，http://localhost:8080/news
    history: createWebHistory(),
    routes: [
        {
            // 默认/ 首页
            path: '/',
            component: ()=> import("@/views/Home"),
            meta: {title: "首页"}
        },
        {
            path: '/parent',
            component: ()=> import("@/views/Parent"),
            meta: {title: "Parent"}
        },
        {
            path: '/book',
            component: ()=> import("@/views/Book"),
            meta: {title: "图书"},
            children: [
                {
                    path: '/book/:id/:title',
                    component: ()=> import("@/views/BookDetail"),
                    meta: {title: "图书1"}
                },
                {
                    path: '/book2',
                    component: ()=> import("@/views/BookDetail"),
                    meta: {title: "图书2"}
                }
            ]

        },
        {
            path: '/user',
            component: ()=> import("@/views/UserMain"),
            meta: {title: "用户入口"},
            children: [
                {
                    path: '/user',
                    components: {List: ()=> import("@/views/user/UserList")},
                    meta: {title: "用户列表"}
                },
                {
                    path: '/user/add',
                    components: {Add:()=> import("@/views/user/UserAdd")},
                    meta: {title: "用户添加"}
                }
            ]
        }
    ]
});

// 设置页面标题
router.afterEach(to => {
    document.title = to.meta.title;
})

export default router